<template>
  <view class="shop-goods">
    <u-empty v-if="shopData.length==0" text="商品为空，快去上传吧" mode="list"></u-empty>
    <view v-else  class="img-box" v-for="(item,index) in shopData" :key="index">
      <u-image width="710rpx" border-radius="10rpx" height="300rpx" :src="IMG_URL + item.link"></u-image>
      <view class="top" @click="del(item)">
        <view class="del">
          <u-icon size="40" name="/static/image/userDetails/shanchu.png"></u-icon>
        </view>
      </view>
      <view class="bottom">
        <view style="white-space: nowrap;text-overflow: ellipsis;width: 100%;height: 100%;overflow: hidden;">
          {{ item.title }}</view>
      </view>
    </view>
    <view>
      <u-button  :custom-style="customStyle" shape="circle" @click="toShopUpload">{{`上传商品(${shopData.length||'0'}/6)`}}</u-button>
    </view>
  </view>
</template>

<script>
import {getGoods,delGoods} from "../../../api/shop";
import {IMG_URL} from "../../../config/URL";

export default {
  name: "index",
  onShow() {
    this.fetch()
  },
  data() {
    return{
      IMG_URL,
      customStyle: {
        marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        color: 'white',
        backgroundColor:'#10d169',
      },
      shopData:[]
    }
  },
  computed:{
    isDisabled() {
      return this.shopData.length >= 6
    }
  },
  methods:{
    async fetch() {
      uni.showLoading({
        title: '加载中'
      });

      const res = await getGoods({
        f_business_id:uni.getStorageSync('shopInfo').id
      })
      if (res.data.data) {
        this.shopData = res.data.data;
      }else{
        this.shopData = []
      }
      uni.hideLoading();
    },

    async del(item) {
      let that = this
      uni.showModal({
        title: '提示',
        content: '是否确定删除商品',
        success:async function (res) {
          if (res.confirm) {
            const res = await delGoods({
              id:item.id
            })
            await that.fetch()
          } else if (res.cancel) {

          }
        }
      });
    },
    toShopUpload() {
      if (this.isDisabled) {
        uni.showToast({
          title: '商品已满',
          icon:'error',
          duration: 2000
        });
      }else{
        uni.navigateTo({ url: '/subPages/subShops/shopUpload/index' });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.shop-goods {
  min-height: 100vh;
  padding: 20rpx;
  .img-box {
    margin-bottom: 40rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    height: 300rpx;
    border-radius: 20rpx;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    .top{
      display: flex;
      justify-content: flex-end;
      padding: 10rpx;
      position: relative;
      top: -300rpx;
      .del{
      }
    }
    .bottom{
      height: 70rpx;
      background-color: #a9a9ab;
      opacity: 0.8;
      color: white;
      padding: 10rpx;
      position: relative;
      top: -126rpx;
    }
  }
}
</style>
